---
title: Remix - Installation Guide
description: Learn how to use Material Tailwind components with Remix and Tailwind CSS to easily create elegant and flexible pages.
navigation:
  [
    "installation",
    "npm",
    "yarn",
    "pnpm",
    "tailwindcss-config",
    "with-monorepo",
    "theme-provider",
    "example",
  ]
github: guide/next
prev: installation
next: license
---

# Material Tailwind with Remix

<span id="installation" className="scroll-mt-48" />
Learn how to setup and install @material-tailwind/react with Remix.

<br />
<br />

First you need to create a new project using remix, for more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://remix.run/docs/en/main?ref=material-tailwind">Remix Official Documentation</a>

```bash
npx create-remix@latest
```

<br />

Then you need to install Tailwind CSS since @material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project.
Check <a href="https://tailwindcss.com/docs/guides/remix?ref=material-tailwind" target="_blank" className="font-medium hover:text-blue-500 transition-colors">Tailwind CSS Installation</a> for remix on Tailwind CSS Documentation

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/react as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />

```bash
npm i @material-tailwind/react
```

---

<DocsTitle href="yarn">
## Using Yarn
</DocsTitle>

Install @material-tailwind/react as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/react
```

---

<DocsTitle href="pnpm">
## Using PNPM
</DocsTitle>

Install @material-tailwind/react as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/react
```

---

<DocsTitle href="tailwindcss-config">
## TailwindCSS Configurations
</DocsTitle>

<span id="tailwindcss-config" className="scroll-mt-48" />

Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the <Code>withMT()</Code> function coming from @material-tailwind/react/utils/withMT.

```js {3, 5, 11}
import type { Config } from "tailwindcss";

import withMT from "@material-tailwind/react/utils/withMT";

export default withMT({
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config);
```

---

<DocsTitle href="with-monorepo">
## TailwindCSS Configurations with MonoRepo
</DocsTitle>

<span id="with-monorepo" className="scroll-mt-48" />

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

```js {8,9}
import type { Config } from "tailwindcss";

import withMT from "@material-tailwind/react/utils/withMT";

export default withMT({
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config);
```

---

<DocsTitle href="theme-prof">
## Theme Provider
</DocsTitle>

<span id="theme-provider" className="scroll-mt-48" />

@material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. You need to wrap your entire application with the <Code>ThemeProvider</Code> coming from @material-tailwind/react.

On the <Code>app/entry.client</Code> put the code bellow.

```jsx {4, 9, 11}
import { RemixBrowser } from "@remix-run/react";
import { startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
import { ThemeProvider } from "@material-tailwind/react";

startTransition(() => {
  hydrateRoot(
    document,
    <ThemeProvider>
      <RemixBrowser />
    </ThemeProvider>
  );
});
```

---

<DocsTitle href="example">
## Example
</DocsTitle>

Now you're good to go and use @material-tailwind/react in your project.

<CodePreview id="example" component={<Button>Button</Button>}>
```jsx
import MaterialTailwind from "@material-tailwind/react";
const { Button } = MaterialTailwind;

export default function Example() {
  return <Button>Button</Button>;
}
```
</CodePreview>
